<template>
  <div class='list-model'>
    <div v-for="(item, index) in modelData" :key="index" class="mb10 mt10">
      <span class="title ft14">{{item.label}}：</span>
      <span v-if="readonly&&(item.isInput||item.isSelect||item.isTextarea)">啊啊啊啊</span>
      <span v-else-if="readonly&&(item.isRadio)">单选</span>
      <div v-else-if="readonly&&item.isUpload" class="imgs-box">
        <img src="" alt="">
      </div>
      <el-input v-else-if="item.isInput" clearable placeholder=""></el-input>
      <el-select v-else-if="item.isSelect" v-model="item.value" filterable allow-create clearable placeholder="请选择">
        <el-option
          v-for="(opt,optIndex) in item.array"
          :key="optIndex"
          :label="opt.label"
          :value="opt.value">
        </el-option>
      </el-select>
      <el-radio-group v-else-if="item.isRadio" v-model="item.value" @change="doChange(item)">
        <el-radio v-for="(opt, optIndex) in item.array" :key="optIndex" :label="opt.value">{{opt.label}}</el-radio>
      </el-radio-group>
      <UploadImgs v-else-if="item.isUpload" />
      <el-input
        v-else-if="item.isTextarea"
        type="textarea"
        :rows="4"
        placeholder="请输入内容"
      >
      </el-input>
    </div>
  </div>
</template>
<script>
import UploadImgs from '@/components/upload/uploadImgs.vue'
export default {
  props:['modelData',"readonly"],
  components: {UploadImgs},
  name: "",
  data() {
    return {};
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.list-model {
  >div{
    display: flex;
    .el-input{
      width: 200px;
    }
    .el-textarea{
      width: 600px;
    }
    span{
      line-height: 30px;
      // font-size: 14px;
    }
    .title{
      display: inline-block;
      min-width: 100px;
      text-align: right;
    }
  }
  .imgs-box{
    display: flex;
    flex-wrap: wrap;

    img{
      width: 140px;
      height: 140px;
    }
  }
}
</style>